<template>
  <!-- Table 表格组件 -->
  <div>
    <el-table
      :data="newdevTable"
      style="width: 100%"
      class="tableData"
      :height="tableStyle.TableHight"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      　　ref="table1"
    >
      <template v-for="(item, index) in newListTable">
        <!-- 一级表头 -->
        <el-table-column
          v-if="item.children"
          width="180"
          align="center"
          :key="item.id"
          :prop="item.prop"
          :label="item.name"
        >
          <!-- 二级表头 -->
          <template v-for="item_child in item.children">
            <el-table-column
              v-if="item_child.children"
              :key="item_child.childrenId"
              :prop="item_child.prop"
              :label="item_child.name"
            >
              <!-- 三级表头 -->
              <template v-for="(childItem_three, index2) in item.children">
                <el-table-column
                  v-if="childItem_three.children"
                  :key="index2"
                  :prop="childItem_three.prop"
                  :label="childItem_three.name"
                ></el-table-column>
                <el-table-column
                  v-else
                  :label="childItem_three.name"
                  :key="index2"
                  align="center"
                  :type="childItem_three.type"
                  :prop="childItem_three.prop"
                ></el-table-column>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :label="item_child.name"
              :key="item_child.childrenId"
              align="center"
              :type="item_child.type"
              :prop="item_child.prop"
            ></el-table-column>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :label="item.name"
          :key="item.name"
          align="center"
          :type="item.type"
          :prop="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <slot name="tab-bttom"></slot>
  </div>
</template>

<script>
export default {
  // props: ["dataList", "devTable"], // dataList:数据列表配置对象 devTable：列表数据
  props: {
    dataList: {},
    devTable: {},
    tableStyle: {
      Type: Object,
      default() {
        return {
          TableHight: "180",
        };
      },
    },
    showSum: {
      Type: Boolean,
      default: false,
    },
  }, // dataList:数据列表配置对象 devTable：列表数据

  data() {
    return {
      //搜索框
      // suoS: {},
    };
  },
  computed: {
    newdevTable() {
      return this.devTable;
    },
    newListTable() {
      return this.dataList;
    },
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
/deep/ .el-table {
  border-bottom: none;
}
// .tableData {
//   padding: 0 20px;
// }
</style>
